<!-- 侧导航栏 -->
<template>
  <div style="display=flex;">
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group> -->

      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        :router="true"
        :collapse="isCollapse"
        background-color="#000000"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="height:1800px">
        <!-- style="height:auto" -->
        <!-- :default-active="$route.path"使得在没有点击左侧导航栏时，也能根据路由转变转化颜色 -->
        <div style="display=flex;">
          <!-- <img src_old="../assets/Logo.png" width="12%" style="display:inline-block;padding-right: 3px;" align="absmiddle"> -->
          <img src="../assets/数据显示.png" width="20px" style="display:inline-block;padding-left: 1px;padding-right: 5px;" align="absmiddle">
          <!-- align="absmiddle"让图像和文字一样高 -->
          <h3 style="display:inline-block;" @click = "bigscreen">{{ isCollapse ? '' :  '文本增强时间序列预测系统'}}</h3>
          <!--  -->
        </div>

      <!-- <el-button @click="handleMenu" icon="el-icon-menu" size="mini">bibibi</el-button> -->



        <!-- 循环遍历所有的单导航栏 -->
        <!-- 没有子菜单 -->                                               <!-- index都是为了确保唯一性,但最好设置为path，有利于根据路由跳转页面 -->
        <el-menu-item @click='clickMenu(item)' v-for="item in nochildren" :key='item.path' :index='item.path'>
        <!-- : 是v-bind: -->
          <i :class="`el-icon-${item.icon}`"></i> <!-- 图标，官网可选 -->
          <span slot="title">{{ item.label }}</span>
        </el-menu-item>

        <!-- 有子菜单 -->
        <el-submenu  v-for="item in hasChildren" :key='item.path' :index='item.path'><!-- index都是为了确保唯一性 -->
            <template slot="title">
              <i :class="`el-icon-${item.icon}`"></i>
              <span slot="title">{{ item.label }}</span>
            </template>
            <el-menu-item-group v-for='subItem in item.children' :key='subItem.path'>
              <el-menu-item @click='clickMenu(subItem)' :index="subItem.path" style="padding-left: 70px;">{{subItem.label}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>


      </el-menu>






</div>
</template>



<script>
export default {

  data() {
    return {
      // isCollapse:false,
      menuData: [
        // 只保留股票价格预测分析
        {
          path: '/stock_market_entity_risk_warning',
          label: '股票价格预测分析',
          icon: 's-finance',
          children: [
            { path: '/stock_market_entity_risk_warning', name: 'stock_market_entity_risk_warning', label: '股票数据集可视化验证' }
          ]
        }
      ],
    };
  },




  methods: {


    bigscreen(){//点击标题跳转大屏
      this.$router.push('/bigscreen');
    },

    //点击菜单
    clickMenu(item){
     // 当页面的路由this.$route.path 与 跳转的路由item.path 不一致才允许跳转
     if (this.$route.path !== item.path && !(this.$route.path === '/market_entities' && (item.path === '/'))) {//$route是当前路径的路由
        this.$router.push(item.path)//$router是整个的router实例
      }
      this.$store.commit('selectMenu', item)//点击获取新路由对象,store在这里不用import
    },

  },
  computed: {

    hasChildren() {//有子菜单才需要用
      return this.menuData.filter((item) => item.children);
    },
    nochildren() {
      return this.menuData.filter((item) => !item.children);
    },
    isCollapse(){
      return this.$store.state.tab.isCollapse

    },
  },
};
</script>


<style lang="less" scoped>
/* 华东师范大学红白配色主题 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  min-height: 300px;
  background-color: #8B1A1A !important; /* 深红色背景,降低对比度 */
}

.el-menu-item, .el-submenu__title {
    height: 40px;
    line-height: 45px;
}

.el-dropdown-menu__item, .el-menu-item {
  font-size: 13px;
}

.el-menu{
  height:100vh;
  background-color: #8B1A1A !important; /* 深红色背景,降低对比度 */
  border-right: none;
  
  h3{
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF; /* 白色文字 */
    text-align: center;
    line-height: 4;
  }
}

/deep/ .el-menu-item-group__title {
    padding: 0px 0 0px 0px;
    line-height: normal;
    font-size: 12px;
    color: #FFFFFF; /* 白色文字 */
}

/deep/ .el-submenu__title {
    font-size: 13px;
    height: 40px!important;
    line-height: 50px!important;
    color: #FFFFFF !important; /* 白色文字 */
}

/deep/ .el-submenu__title:hover {
    background-color: #6B1414 !important; /* 更深红色悬停 */
}

/deep/ .el-menu-item {
    color: #FFFFFF !important; /* 白色文字 */
}

/deep/ .el-menu-item:hover {
    background-color: #6B1414 !important; /* 更深红色悬停 */
}

/deep/ .el-menu-item.is-active {
    background-color: #6B1414 !important; /* 更深红色激活 */
    color: #FFFFFF !important;
}

/deep/ .el-submenu__icon-arrow {
    position: absolute;
    top: 70%;
    color: #FFFFFF; /* 白色箭头 */
}

/deep/ .el-icon {
    color: #FFFFFF; /* 白色图标 */
}

</style>